@import "media-queries";

.myPoints {
  .mpy-myPoints-hd {
    background: $mainColor;
    padding: 2rem 0;
    li:first-child {
      padding-right: 2rem;
      text-align: right;
      img {
        color: white;
        width: 3.5rem;
        height: 3.5rem;
      }
    }
    li:last-child {
      text-align: left;
      p {
        color: $AuxiliaryFontBlackColor;
        margin: 0;
      }
      p:first-child {
        font-size: 1rem;
        line-height: 1.6rem;
      }
      p:last-child {
        line-height: 2.1rem;
        font-size: 2.1rem;
      }
    }
  }
  .mpy-myPoints-bd {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 0.5rem solid #f1f1f1;
    li {
      margin-bottom: 1rem !important;
      h4 {
        color: $mainFontColor;
        margin: 0;
        line-height: 1.5rem;
        font-size: 1rem;
      }
      p {
        color: $AuxiliaryFontBlackColor;
        margin: 0;
        line-height: 2rem;
        font-size: 1.4rem;
      }
    }
    .mpy-border {
      border-left: 0.1rem solid #cccccc;
      border-right: 0.1rem solid #cccccc;
    }
  }
  .mpy-myPoints-ft {
    margin: auto 2rem;
    p {
      color: $AuxiliaryRedColor;
      font-size: 1.2rem;
      margin: 1rem auto;
    }
  }
}